<template>
<h1>微博首页</h1>
  <div v-if="user==null">
    <router-link to="/reg">注册</router-link>
    <router-link to="/login">登录</router-link>
  </div>
  <div v-else>
    <h2>欢迎回来{{user.nickname}}回来！</h2>
    <router-link to="/post">发微博</router-link>
    <el-button @click="layout()">退出登录</el-button>
  </div>
  <hr>
  <div v-for="weibo in arr">
    <router-link :to="'/detail?id='+weibo.id">
      <h3>{{weibo.nickname}}说：{{weibo.content}}</h3>
    </router-link>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";

const arr=ref([]);

//所有进入页面就发请求的带写在此声明周期方法中
onMounted(()=>{
  console.log("进入周期方法")
  axios.get('http://localhost:8081/v1/weibos/').then(
      (response)=>{
        console.log("准备判断");
        if (response.data.code==2001){
          console.log("返回响应的数据"+response.data.data);
          //把服务器响应回来的微博数据装进数组中
          arr.value = response.data.data;
          console.log("数组的值="+arr.value);
    }
  })
});
/*onMounted(
    axios.get('http://localhost:8081/v1/weibos')
        .then(
            (response)=>{
              if (response.data.code==2001){
                arr.value=response.data.data;
              }
            }
        )
);*/
const layout = () =>{
  if (confirm("你确认退出的登录么？")){
    localStorage.clear();
    user.value=null;
  }
}

let user=ref(localStorage.user?JSON.parse(localStorage.user):null);
/*localStorage.user?判断是否有值 结果是Boolean*/
</script>
